
<template>
  <div>
    <h1>订单管理</h1>
    <!-- 搜索区域 -->
    <div class="search">
      <el-select value="按订单号查询">
        <el-option value="按订单号查询"></el-option>
      </el-select>
      <el-input v-model="searchValue" placeholder="订单号"></el-input>
      <el-button @click="search">查询</el-button>
    </div>
    <!-- 搜索区域 -->
    <el-table :data="Datalist" style="width: 100%">
      <el-table-column prop="orderNo" label="订单号"></el-table-column>
      <el-table-column prop="receiverName" label="收件人"></el-table-column>
      <el-table-column prop="statusDesc" label="订单状态"></el-table-column>
      <el-table-column prop="shippingId" label="订单总价"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="look(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <my-page :total="total" @page="handleCurrentChange"></my-page>
  </div>
</template>

<script>
import { Table, TableColumn, Button } from "element-ui";
import { order } from "../../../../api/index";
import MyPage from "../MyPage/MyPage.vue";
export default {
  name: "order",
  components: {
    MyPage,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Button.name]: Button,
  },
  data() {
    return {
      Datalist: [],
      total: 0,
      pagesize: 10,
      currentpage: 1,
      searchValue: "",
    };
  },
  mounted() {
    //请求数据
    order({ pageNum: 1 }).then((res) => {
      console.log(res);
      this.Datalist = res.data.data.list;
      this.total = res.data.data.total;
    });
  },
  methods: {
    //分页
    handleCurrentChange(cpage) {
      console.log(cpage);
      this.currentpage = cpage;
      order({ pageNum: this.currentpage }).then((res) => {
        this.Datalist = res.data.data.list;
      });
    },
    //搜素
    search() {
      if (this.searchValue != "") {
        this.Datalist = this.Datalist.filter((item) => {
          return item.orderNo == this.searchValue;
        });
      } else {
        order({ pageNum: this.pageNum }).then((res) => {
          console.log(res);
          this.Datalist = res.data.data.list;
          this.total = res.data.data.total;
        });
      }
    },
    //查看详细
     look(orderNo) {

            this.$router.push({
                path: "/product/index/order/detail",
                query: {
                    orderNo,
                },
            });
        },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  display: inline-block;
  text-align: center;
  width: 80px;
  margin: 0 10px;
}
.search {
  display: flex;
  margin: 20px 0;
  .el-select {
    flex-basis: 10%;
  }
  .el-input {
    flex-basis: 10%;
    margin: 0 20px;
  }
  .el-button {
    flex-basis: 5%;
  }
}
</style>